<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <script src="./axios.js"></script>
  <script src="./base.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul{
      margin-top: 0.1rem;
      height: 100vh;
      display: flex;
      flex-wrap: wrap;
    }
    .list {
      width: 33%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      box-sizing: border-box;
      margin-bottom: 0.1rem;
    }
    .list:hover{
      border: 1px solid #666;
      /* transition: all 0.5s; */
    }
    .list>img {
      width: 1rem;
      border-radius: 0.02rem;
    }

    .list-item {
      width: 1rem;
    }
    .list-price {
      width: 1rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      font-size: 0.12rem;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li class="list" v-for="item in items" :key="item.id">
        <img :src="item.pic" alt="">
        <div class="list-item">
          <p style="color: #333; font-size: 0.14rem;">{{item.name}}</p>
          <p style="color: orangered; font-size: .12rem;">仓库剩余：{{item.stores}}</p>
          <!-- <p style="color: #666;font-size: 0.12rem;">浏览量：{{item.views}}次</span> -->
          <div class="list-price">
            <p>
              现价：<span style="color: orangered">{{item.originalPrice}}</span>
            </p>
            <p style="color: #999;">原价：<span
                style="text-decoration: line-through;">{{item.minPrice}}</span></p>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <script src="../vue.js"></script>
  <script>
    //定义axios默认配置
    const request = axios.create({
      baseURL: 'https://api.it120.cc/conner',
      data: {},
      timeout: 5000
    })

    const app = new Vue({
      el: '#app',
      data: {
        items: []
      },
      created() {
        this.fetchData();
      },
      methods: {
        fetchData() {
          // post方法接受三个参数，第一个是url，第二个是请求参数，第三个参数是config
          request.post('/shop/goods/list/v2',
            /* {
              header: {
                'content-type':'x-www-form-urlencoded'
              }
            } */
          ).then(res => {
            this.items = res.data.data.result;
          })
            .catch(err => { })
        }
      }
    })
  </script>
</body>

</html>